<template>
  <div class="w h box-b  over-h page-frame ">
    <div v-if="showNavBar" class="page-header">
      <slot name="header">
        <div v-if="showNavBar" class="nav-bar">
          <slot name="header-left">
            <span class="header-left" @click="goBackFunction(isBackedReload)">
              <van-icon size="18" name="arrow-left" />
            </span>
          </slot>
          <span class="header-title">
            <slot name="header-title"></slot>
          </span>
          <div>
            <slot name="header-right">
              <span></span>
            </slot>
            <van-icon class="m-l2 m-r2" name="bullhorn-o" v-if="isDevelopment" @click="testPushMessage" />
            <van-icon class="m-l2" name="replay" @click="reloadPage" />
            <div v-if="isDevelopment" class="w-20 h-10"></div>
          </div>
        </div>
      </slot>
    </div>
    <div class="page-content" :style="{ height: `calc(100% - ${showNavBar ? '72px' : '0px'})`, 'overflow': 'auto' }">
      <van-pull-refresh :pull-distance="showNavBar ? 0 : 0" :disabled="!showPageRefresh || !vanPullRefresh"
        class="w over-a-y" v-model="pageRefreshLoading" success-text="刷新成功" @refresh="onRefresh"
        style="min-height: 100%;">
        <div ref="vanPullRefreshMain" class="w box-b van-pull-refresh-main">
          <slot name="content"></slot>
          <slot></slot>
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script lang="ts">

declare const process: any;

import PageBase from '@/views/mixins/page-base'
export default {
  name: 'pageFrame',
  mixins: [PageBase],
  emits: ['update:refresh-loading', 'onRefresh'],
  props: {
    showNavBar: {
      type: Boolean,
      default: true
    },
    /**
     * 后退后是否刷新
     */
    isBackedReload: {
      type: Boolean,
      default: false
    },
    /**
     * 后退方法
     */
    goBackPage: [Function, Object],

    //下拉刷新
    showPageRefresh: {
      type: Boolean,
      default: false
    },
    //下拉刷新
    refreshLoading: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    pageRefreshLoading: {
      get(): boolean {
        if (!this.showPageRefresh) {
          return false
        }
        return this.refreshLoading
      },
      set(val: boolean) {
        this.$emit('update:refresh-loading', val)
      }
    },
    isDevelopment() {
      return (process as any).env.NODE_ENV !== 'production'
    },
    goBackFunction(): Function {
      if (typeof this.goBackPage == 'function') {
        return this.goBackPage
      }
      return (reload: boolean) => this.goBackOrForward(-1, reload)
    },
  },
  data() {
    return {
      vanPullRefresh: true,
      vanPullRefreshOffTop: 72, //去除掉头部位置距离
    }
  },
  methods: {
    /**
     * 创建页面内容滚动时间
     */
    crateVanPullRefreshMainScroll() {
      const el = document.querySelector('.page-content') as any;
      if (!el) {
        return true;
      }

      el.onscroll = (e: any) => {
        this.vanPullRefresh = e.target.scrollTop <= this.vanPullRefreshOffTop - 2
      }
    },
    onRefresh() {
      setTimeout(() => {
        this.crateVanPullRefreshMainScroll();
      }, 200);
      this.$emit('onRefresh', null)
    },
    /**
     * 测试发送消息
     */
    testPushMessage() {
      (this.$ano as any).request('system/pushMessage', 'POST', {
        title: '16:57:04【呼EA】',
        text: '测试消息，成功发送搞一条信息'
      })
    },
    reloadPage() {
      window.location.reload()
    }
  },
  mounted() {
    this.crateVanPullRefreshMainScroll();
  },
  created() {
    setTimeout(() => {
      this.crateVanPullRefreshMainScroll();
    }, 200);
  }
}
</script>

<style lang="scss" scoped>
.page-frame {
  height: 100%;
  width: 100%;
  user-select: none;

  .nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
  }

  .page-header {
    width: 100%;
    box-sizing: border-box;

    .header-left {
      @extend .f-c, .a-i-c, .u-s-n;
      width: 48px;
      height: 48px;
      color: var(--page-header-color);
      border-radius: 14px;
      background: var(--page-header-background-color);
      box-shadow: var(--page-header-box-shadow);
    }

    .header-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--page-header-title-color);
      text-align: center;
      vertical-align: top;
    }
  }

  .page-content {
    width: 100%;
    box-sizing: border-box;
    color: var(--default-font-color);
    overflow: hidden;
  }
}
</style>
